簡(jiǎn)介：通過(guò)本課程，讓您掌握鼠標(biāo)滾輪事件的細(xì)節(jié)，并能通過(guò)掌握細(xì)節(jié)實(shí)現(xiàn)自定義滾動(dòng)條的效果。我們學(xué)完后也可以將鼠標(biāo)滾輪事件封裝成組件，通過(guò)封裝的組件實(shí)現(xiàn)一個(gè)復(fù)雜的交互效果，深入理解滾輪事件的交互。
第1章 介紹課程目標(biāo)和學(xué)習(xí)內(nèi)容
通過(guò)詳細(xì)的細(xì)分教學(xué)，讓學(xué)生掌握鼠標(biāo)滾輪事件的細(xì)節(jié)，并能通過(guò)掌握的細(xì)節(jié)實(shí)現(xiàn)自定義滾動(dòng)條的效果。并能將鼠標(biāo)滾輪事件封裝成組件。通過(guò)封裝的組件實(shí)現(xiàn)一個(gè)復(fù)雜的交互效果，深入理解滾輪事件的交互
第2章 案例HTML和CSS搭建
分析并完成示例的HTML結(jié)構(gòu)，并同時(shí)完成標(biāo)簽區(qū)域和滾動(dòng)區(qū)域的樣式，實(shí)現(xiàn)案例整體外觀。
第3章 實(shí)現(xiàn)案例交互
介紹自調(diào)用匿名函數(shù)，jQuery.extend方法的使用，實(shí)現(xiàn)可復(fù)用的JS代碼組織結(jié)構(gòu)。講解拖動(dòng)滑塊內(nèi)容滾動(dòng)的思路，以及基本的事件綁定與解除，事件命令空間的使用，了解jQuery中outerHeight()與height()的區(qū)別，掌握實(shí)現(xiàn)標(biāo)簽切換時(shí)實(shí)現(xiàn)文章定位的思路。
- 視頻： 3-1 jQuery交互代碼組織方式 (08:47)
- 視頻： 3-2 jQuery交互初始化操作的實(shí)現(xiàn) (04:14)
- 視頻： 3-3 拖動(dòng)滑塊內(nèi)容滾動(dòng)的思路 (07:22)
- 視頻： 3-4 拖動(dòng)滑塊內(nèi)容滾動(dòng)的實(shí)現(xiàn) (07:36)
- 視頻： 3-5 鼠標(biāo)滾輪控制文章滾動(dòng)功能的實(shí)現(xiàn) (03:49)
- 視頻： 3-6 切換標(biāo)簽定文章功能的實(shí)現(xiàn) (07:27)
- 視頻： 3-7 滾動(dòng)內(nèi)容選中對(duì)應(yīng)標(biāo)簽功能的實(shí)現(xiàn) (02:48)
第4章 總結(jié)課程
通過(guò)本課程，我們學(xué)習(xí)了鼠標(biāo)的滾輪事件，以及如何封裝成jQuery事件組件。結(jié)合實(shí)際的例子，我們實(shí)現(xiàn)了如何通過(guò)鼠標(biāo)滾輪事件控制文本內(nèi)容的滾動(dòng)。